<template>
  <el-dialog title="盘亏盘盈详情" :close-on-click-modal="false" :visible.sync="visible" center fullscreen>
		<el-button class="miui-dialog-close-btn" @click="visible = false">关闭页面</el-button>
    <el-form :model="dataForm" :rules="dataRule" ref="dataForm" label-width="80px">
      <el-row :gutter="15">
        <el-col :span="8">
          <el-form-item label="单据编号">
            <el-input v-model="dataForm.billId" disabled/>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="盘点单号">
            <el-input v-model="dataForm.XXX" disabled/>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="单据类型">
            <el-select v-model="dataForm.checkType" placeholder="请选择" disabled>
              <el-option v-for="item in checkTypeOptions" :key="item.value" :label="item.name" :value="item.value"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="15">
        <el-col :span="8">
          <el-form-item label="所属部门" prop="deptId">
            <el-select v-model="dataForm.deptId" placeholder="请选择" disabled>
              <el-option v-for="item in deptOptions" :key="item.id" :label="item.name" :value="item.id"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="收入仓位">
            <el-select v-model="dataForm.stockId" placeholder="请选择"  disabled>
              <el-option v-for="item in stockOptions" :key="item.id" :label="item.name" :value="item.id"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="盘点类型">
            <el-select v-model="dataForm.ctgId" placeholder="请选择" disabled>
              <el-option v-for="item in ctgOptions" :key="item.value" :label="item.name" :value="item.value"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="15">
        <el-col :span="8">
          <el-form-item label="制单人">
            <el-input v-model="dataForm.username" disabled/>
          </el-form-item>
        </el-col>
        <el-col :span="16">
          <el-form-item label="单据日期">
            <el-input v-model="dataForm.createTime" disabled/>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="15">
        <el-col :span="8">
          <el-form-item label="审核人">
            <el-input v-model="dataForm.auditName" disabled/>
          </el-form-item>
        </el-col>
        <el-col :span="16">
          <el-form-item label="审核日期">
            <el-input v-model="dataForm.auditTime" disabled/>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="15">
        <el-col :span="24">
          <el-form-item label="备注" >
            <el-input type="textarea" :rows="2" placeholder="请输入内容" v-model="dataForm.memo" disabled></el-input>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <el-table :data="dataList" border v-loading="dataListLoading" show-summary :summary-method="getSummaries" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55"></el-table-column>
      <el-table-column prop="code" label="商品代码" width="160"></el-table-column>
      <el-table-column prop="viewGoodsName" label="商品名称"></el-table-column>
      <el-table-column prop="spec" label="型号" width="100"></el-table-column>
      <el-table-column label="单位" width="60">
        <template slot-scope="scope">
          {{getValueByKey(unitTypeData,scope.row.unitType)}}
        </template>
      </el-table-column>
      <el-table-column prop="number" label="数量" width="80"></el-table-column>
      <el-table-column prop="costPrice" label="单位成本" width="100"></el-table-column>
      <el-table-column prop="costPriceTotal" label="成本合计" width="100"></el-table-column>
      <el-table-column prop="taxPrice" label="含税单价" width="80"></el-table-column>
      <el-table-column prop="taxPriceTotal" label="价税合计" width="100"></el-table-column>
    </el-table>
    <span slot="footer" class="dialog-footer">
      <el-button @click="visible = false">关闭</el-button>
    </span>
  </el-dialog>
</template>

<script>
  import { getInfoById,getCtgDataList } from "@/api/eims/check";
  import { remote } from '@/api/admin/dict'
  import { mapGetters } from "vuex"
  import { getStockList } from "@/api/eims/stock"
  import {getDeptInfo} from '@/api/admin/dept'


  export default {
    data() {
      return {
        visible: false,
        unitTypeData: [],
        dataForm: {
          id: 0,
          stockId: "",
          ctgId: "",
          checkType: "",
          memo: "",
          list: []
        },
        stockOptions: [],
        ctgOptions: [],
        checkTypeOptions: [
          { value: "1", name: "盘盈" },
          { value: "2", name: "盘亏" }
        ],
        dataList: [],
        dataRule: {
        },
        dataListLoading: false,
        selectionList: [],
        deptOptions: [],
      };
    },
    computed: {
      ...mapGetters(["permissions", "userInfo",'bizData'])
    },
    methods: {
      init(id) {
        this.getCtgList();
        this.stockList();
        this.getDeptList();
        remote('unit_type').then(result => {
          this.unitTypeData = result.data.data
        })
        for (let key in this.dataForm) {
          if (key == 'list') {
            this.dataForm[key] = []
          } else {
            this.dataForm[key] = ''
          }
        }
        this.dataList = []
        this.dataForm.id = id || 0;
        this.visible = true;
        this.$nextTick(() => {
          this.$refs["dataForm"].resetFields();
          this.dataListLoading = true
          if (this.dataForm.id) {
            getInfoById(this.dataForm.id).then(response => {
              if(response.data.code == '0'){
              	this.dataForm = response.data.data
              	this.dataList = response.data.data.infos
              }else{
              	this.$message.error(response.data.msg)
              }
              this.dataListLoading = false
            })
          }

        });
      },
      handleSelectionChange(val) {
        this.selectionList = val;
      },
      //  获取仓位列表
      stockList() {
        getStockList().then(response => {
          if(response.data.code == '0'){
          	this.stockOptions = response.data.data;
          }else{
          	this.$message.error(response.data.msg)
          }
        });
      },
      // 获取部门列表
      getDeptList () {
        getDeptInfo().then(response => {
          if(response.data.code == '0'){
          	this.deptOptions = response.data.data
          }else{
          	this.$message.error(response.data.msg)
          }
        })
      },
      getCtgList() {
        getCtgDataList().then(response => {
          if(response.data.code == '0'){
          	let dataList = response.data.data.records;
          	let options = [];
          	dataList.forEach(item => {
          	  options.push({
          	    value: item.id,
          	    name: item.name
          	  });
          	});
          	this.ctgOptions = options;
          }else{
          	this.$message.error(response.data.msg)
          }
        });
      },
      getValueByKey(data,key) {
        let obj = {}
        obj = data.find(item => {
          return item.value == key
        })
        if(obj && obj.label){
          return obj.label
        }
      },
      unitType(row, column, cellValue, index) {
        switch (cellValue) {
          case '01':
            return '片';
            break;
          case '02':
            return '盒';
            break;
          case '03':
            return '副';
            break;
          case '04':
            return '瓶';
            break;
          case '05':
            return '张';
            break;
          case '06':
            return '把';
            break;
          case '07':
            return '个';
            break;
          case '08':
            return '只';
            break;
          case '09':
            return '套';
            break;
          case '10':
            return '天';
            break;
          case '11':
            return '包';
            break;
        }
      },
      //  合计
      getSummaries(param) {
        const { columns, data } = param;
        const sums = [];
        columns.forEach((column, index) => {
          if(index == 4){
            sums[index] = '合计'
            return
          }
          const values = data.map(item => Number(item[column.property]));
          if (!values.every(value => isNaN(value))) {
            if(index == 5){
              sums[index] = values.reduce((prev, curr) => {
                const value = Number(curr);
                if (!isNaN(value)) {
                  return prev + curr;
                } else {
                  return prev;
                }
              }, 0)
            }
            if(index == 7){
              sums[index] = values.reduce((prev, curr) => {
                const value = Number(curr);
                if (!isNaN(value)) {
                  return ((prev*10000 + curr*10000)/10000).toFixed(2);
                } else {
                  return (prev/10000).toFixed(2);
                }
              }, 0)
            }
            if(index == 9){
              sums[index] = values.reduce((prev, curr) => {
                const value = Number(curr);
                if (!isNaN(value)) {
                  return prev + curr;
                } else {
                  return prev;
                }
              }, 0)
            }
          }
        });
        return sums;
      },
    }
  };
</script>
<style lang="scss" scoped>
  /deep/ .el-table {
    display: flex;
    flex-direction: column;
  }
  /deep/ .el-table__body-wrapper {
    order: 1;
  }
</style>
